<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>

    <script>
        var vnode = {
            tag: 'ul',
            props: {
                class: 'list'
            },
            text: '',
            children: [
                {
                    tag: "li",
                    props: {
                        class: "item"
                    },
                    text: '',
                    children: [
                        {
                            tag: undefined,
                            props: {},
                            text: '牛客网',
                            children: []
                        }
                    ]
                },
                {
                    tag: "li",
                    props: {},
                    text: '',
                    children: [
                        {
                            tag: undefined,
                            props: {},
                            text: 'nowcoder',
                            children: []
                        }
                    ]
                }
            ]
        }
        /*
            请补全JavaScript代码，要求将对象参数转换为真实的DOM结构并返回。
            注意：
            1. tag为标签名称、props为属性、children为子元素、text为标签内容
        */
        const _createElm = vnode => {
            // 补全代码
            const _createElm = vnode => {
                let { tag, props, children, text } = vnode
                if (typeof tag == "string") {
                    vnode.el = document.createElement(tag)
                    _setAttr(vnode.el, props)
                    vnode.el.appendChild(document.createTextNode(text))
                    children.forEach(child => {
                        //递归调用
                        vnode.el.appendChild(_createElm(child))
                    })
                } else {
                    vnode.el = document.createTextNode(text)
                }
                return vnode.el
            }
            // 循环添加元素的属性
            const _setAttr = (elem, attrs) => {
                for (key in attrs) {
                    elem.setAttribute(key, attrs[key])
                }
            }

        }
        _createElm(vnode)
    </script>
</body>

</html>